<template>
  <div class="login-box">
    <div class="login-inner">
      <h3>超级会员系统登录</h3>
      <!-- 表单布局 -->
      <el-form
        :model="loginForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
        size="mini"
      >
        <el-form-item prop="account">
          <el-input
            type="text"
            prefix-icon="iconfont icon-yonghu"
            v-model="loginForm.account"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <!-- 事件修饰符 @click.stop.enter.once -->
          <el-input
            :type="isShow ? 'text' : 'password'"
            prefix-icon="iconfont icon-mima"
            v-model="loginForm.password"
            autocomplete="off"
            @keyup.native.enter="submitForm('ruleForm')"
          >
            <template #suffix>
              <!-- 具名插槽 -->
              <i
                class="iconfont"
                :class="isShow ? 'icon-eyes-' : 'icon-eyes'"
                @click="isShow = !isShow"
              ></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            :loading="flag"
            type="primary"
            @click="submitForm('ruleForm')"
            >登 录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { validateAccount, validateOldPwd } from '@/utils/validate.js'
import { login } from '@/api/users.js'
import local from '@/utils/local.js'
import { calcRoute } from '@/router'

export default {
  data() {
    return {
      flag: false,
      isShow: false,
      // 1.0 数据对象
      loginForm: {
        account: '',
        password: ''
      },
      // 2.0 规则对象 - 要求定义的字段和数据对象的字段保持一致
      rules: {
        // validator - 校验器     trigger    触发
        account: [{ validator: validateAccount, trigger: 'blur' }],
        password: [{ validator: validateOldPwd, trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.flag = true
      this.$refs[formName].validate(async valid => {
        if (valid) {
          // 在这里可以发起请求了
          const { code, token, role } = await login(this.loginForm)
          // console.log(data, 111)
          if (code === 0) {
            // 登录成功之后,就把token保存起来
            local.set('token', token)
            local.set('role', role)
            calcRoute()
            // location  是跳转页面,而在当前应用中只需要切换路由
            setTimeout(() => {
              // 切换路由使用的是  this.$router 的方法 (编程式导航)
              this.$router.push('/')
            }, 1000)
          } else {
            this.flag = false
          }
        } else {
          this.flag = false
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login-box {
  height: 100%;
  background: url('../assets/images/preview.jpg') no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-inner {
    width: 370px;
    // background-color: #fff;
    background-color: rgba(255, 255, 255, 0.4);
    padding: 20px;
  }
  h3 {
    text-align: center;
    color: #333;
    letter-spacing: 3px;
    font-size: 16px;
  }

  .el-button {
    width: 100%;
  }
}
</style>
